<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
import { getRoleList, getRightList, delRole, addRole, updateRole } from './system'
import { ElMessage } from 'element-plus'

onMounted(() => {
  handleGetRoleList()
})

const handleGetRoleList = () => {
  getRoleList()
    .then(res => {
      dataSource.value = res.data.data.map(item => {
        return {
          ...item,
          right: item.right
        }
      })
    })
    .catch(err => {
      ElMessage.error(err)
    })

  getRightList()
    .then(res => {
      rightList.value = res.data.data
    })
    .catch(err => {
      ElMessage.error(err)
    })
}

const dataSource = ref([]),
  dialogAdd = ref(false),
  form = reactive({
    roleName: '',
    right: [],
    id: '',
    remark: ''
  }),
  rightList = ref([]),
  dialogTitle = ref('新增角色');

const restForm = () => {
  form.roleName = ''
  form.right = []
  form.id = ''
  form.remark = ''
}

const handleAdd = () => {
  if (dialogTitle.value == '新增角色') {
    addRole({
      ...form,
      right: form.right.map(v => {
        return {
          id: v,
        }
      })
    })
      .then(res => {
        if (res.data.code === 200) {
          ElMessage.success('添加成功')
          dialogAdd.value = false
          handleGetRoleList()
          restForm()
        }
      })
      .catch(err => {
        ElMessage.error(err)
      })
  } else {
    console.log({
      ...form,
      right: form.right.map(v => {
        return {
          id: v,
        }
      })
    });
    updateRole({
      ...form,
      right: form.right.map(v => {
        return {
          id: v,
        }
      })
    })
      .then(res => {
        if (res.data.code === 200) {
          ElMessage.success('修改成功')
          dialogAdd.value = false
          handleGetRoleList()
          restForm()
        }
      })
      .catch(err => {
        ElMessage.error(err)
      })
  }
},
  handleClose = () => {
    dialogAdd.value = false

  },
  handleDelete = (row) => {
    delRole(row)
      .then(res => {
        if (res.data.code === 200) {
          ElMessage.success('删除成功')
          handleGetRoleList()
        } else {
          ElMessage.error('删除失败,请先删除该角色下的用户')
        }
      })
      .catch(err => {
        ElMessage.error(err)
      })
  }

const startEdit = (item) => {
  dialogAdd.value = true
  dialogTitle.value = '编辑角色'
  form.roleName = item.roleName
  form.right = item.right.map(v => v.id)
  form.id = item.id
  form.remark = item.remark
},
  startAdd = () => {
    dialogAdd.value = true
    dialogTitle.value = '新增角色'
    restForm()
  }
</script>

<template>
  <div class="Role">
    <div class="card_hook">
      <el-button style="width: 60px;" size="default" @click="startAdd">新增</el-button>

      <el-table :data="dataSource" style="width: 100%" height="100%">
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column prop="roleName" label="角色名" />
        <el-table-column prop="right" label="权限">
          <template #default="{ row }">
            {{ row.right.map(v => {
              return v.rightName
            }).join(',') }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="updatedAt" label="更新时间" /> -->
        <!-- <el-table-column prop="loginCount" label="登录次数" /> -->
        <el-table-column label="操作">
          <template #default="{ row }">
            <!-- {{ row.admin }} -->
            <el-button type="primary" size="small" @click="startEdit(row)" :disabled="row.admin=='1'">编辑</el-button>
            <!-- <el-button type="danger" size="small">删除</el-button> -->
            <el-popconfirm title="确定要删除么?" @confirm="handleDelete(row)">
              <template #reference>
                <el-button type="danger" size="small" :disabled="row.admin=='1'">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 1 -->
    <el-dialog v-model="dialogAdd" :title="dialogTitle" width="30%" :before-close="handleClose">
      <!-- <span>This is a message</span> -->
      <!-- 添加角色的表单 -->
      <el-form label-width="80px" :model="form">
        <el-form-item label="角色名">
          <el-input v-model="form.roleName" placeholder="请输入角色名"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="form.right" multiple placeholder="请选择权限">
            <el-option v-for="item in rightList" :key="item.id" :label="item.rightName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogAdd = false">取消</el-button>
          <el-button type="primary" @click="handleAdd">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang='less' scoped>
.Role {
  width: 100%;
  height: 100%;
  padding: 7px;

  .card_hook {
    height: 100%;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;


    .editable-row-operations a {
      margin-right: 8px;
    }
  }
}
</style>